<template>
    <div class="center_info_box FlexC">
      <!-- 全部区县下拉选项框 -->
      <div>
        <p class="selectList ColorF Font_s16 TextC Cursor">全部区县 ▼</p>
      </div>
      <!-- 中部地图 -->
      <div>
        <img src="@/assets/img/communityPension/map.png" alt="">
      </div>
      <!-- 底部机构数显示 -->
      <div class="ColorF Flex JustifyContentSA" style="padding-top: 1.25rem;box-sizing: border-box;">
        <p class="messLeft Flex AlignItemsC JustifyContentC">
          <span class="Font_s20" style="color:#FFDE44;">已接入机构</span>
          <span class="Font_s45" style="padding: 0 0.825rem;color:#F9DE06;">78</span>
          <span class="Font_s20" style="color:#F9DE06;">家</span>
        </p>
        <p class="messRight Flex AlignItemsC JustifyContentC">
          <span class="Font_s20" style="color:#2AFAFC;">未接入机构</span>
          <span class="Font_s45" style="padding: 0 0.825rem;color:#2AFAFC;">30</span>
          <span class="Font_s20" style="color:#2AFAFC;">家</span>
        </p>
      </div>
      <!-- 右上角签到数据展示 -->
      <div class="showData TextL">
        <div>
          <p class="Font_s30 FontWeightB" style="color:#2AFAFC;">当日签到总数：</p>
          <div class="dataBox ColorF FontWeightB Font_s40 Flex">
            <p class="dataNum">5</p>
            <p class="dataNum">5</p>
            <p>,</p>
            <p class="dataNum">2</p>
            <p class="dataNum">1</p>
          </div>
        </div>
        <div>
          <p class="Font_s30 FontWeightB" style="color:#2AFAFC;">累计签到总数：</p>
          <div class="dataBox ColorF FontWeightB Font_s40 Flex">
            <p class="dataNum">1</p>
            <p class="dataNum">2</p>
            <p>,</p>
            <p class="dataNum">0</p>
            <p class="dataNum">9</p>
            <p class="dataNum">8</p>
          </div>
        </div>
      </div>
      <!-- 地图散点显示 -->
      <div class="mapPoint p01"><p class="mapNum">16个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p02"><p class="mapNum">12个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p03"><p class="mapNum">722个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p04"><p class="mapNum">12个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p05"><p class="mapNum">141个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p06"><p class="mapNum">2个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p07"><p class="mapNum">9个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p08"><p class="mapNum">16个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p09"><p class="mapNum">16个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p10"><p class="mapNum">162个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p11"><p class="mapNum">192个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p12"><p class="mapNum">1621个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p13"><p class="mapNum">16个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p14"><p class="mapNum">168个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p15"><p class="mapNum">891个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p16"><p class="mapNum">190个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p17"><p class="mapNum">910个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p18"><p class="mapNum">256个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <div class="mapPoint p19"><p class="mapNum">180个</p><p><img class="mapItemAnimate" src="@/assets/img/communityPension/mapItem.png" alt=""></p></div>
      <!-- 组件调用 -->
      <Modal v-if="testModal"></Modal>
    </div>
</template>

<script>
import Modal from '@/components/Modal'
export default {
  name: 'CenterInfo',
  components: {
    Modal
  },
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">
.center_info_box{
  width: 63.6875rem;
  position: relative;
  padding: 2rem 1rem;
  box-sizing: border-box;
  margin-top: 2rem;
  .selectList {
    width: 160px;
    height: 78px;
    line-height: 68px;
    background: url("../../assets/img/communityPension/selectBox.png") no-repeat;
    background-size: 100% 100%;
  }
  .messLeft {
    width: 301px;
    height: 67px;
    background: url("../../assets/img/communityPension/leftInfo.png") no-repeat;
    background-size: 100% 100%;
  }
  .messRight {
    width: 301px;
    height: 67px;
    background: url("../../assets/img/communityPension/rightInfo.png") no-repeat;
    background-size: 100% 100%;
  }
  .showData {
    position: absolute;
    top: 4%;
    right: 3%;
    .dataBox {
      margin: 1rem 0;
      p {
        margin: 0 0.25rem;
      }
    }
    .dataNum {
      width: 52px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: url("../../assets/img/communityPension/number.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .mapPoint {
    position: absolute;
    top: 1%;
    left: 1%;
    text-align: center;
    .mapNum {
      color: #ffffff;
      font-size: 18px;
      text-align: center;
      width: 97px;
      height: 71px;
      line-height: 58px;
      background: url("../../assets/img/communityPension/mapSmall.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: -24px;
    }
    .mapItemAnimate {
      animation: mapItenMove 3s infinite;
    }
    @keyframes mapItenMove {
      0% {transform: scale(1)}
      50% {transform: scale(0.8)}
      100% {transform: scale(1)}
    }
  }
  .p01 { top: 11%; left: 2%; }
  .p02 { top: 19%; left: 32%; }
  .p03 { top: 15%; left: 25%; }
  .p04 { top: 24%; left: 22%; }
  .p05 { top: 28%; left: 14%; }
  .p06 { top: 37%; left: 23%; }
  .p07 { top: 44%; left: 15%; }
  .p08 { top: 28%; left: 35%; }
  .p09 { top: 32%; left: 51%; }
  .p10 { top: 39%; left: 60%; }
  .p11 { top: 41%; left: 36%; }
  .p12 { top: 44%; left: 49%; }
  .p13 { top: 56%; left: 38%; }
  .p14 { top: 52%; left: 52%; }
  .p15 { top: 59%; left: 49%; }
  .p16 { top: 48%; left: 70%; }
  .p17 { top: 57%; left: 68%; }
  .p18 { top: 59%; left: 78%; }
  .p19 { top: 64%; left: 84%; }

}
</style>
